<template>
  <h1>卡片组件</h1>
  <el-row :gutter="10">
    <el-col :span="6" v-for="item in 4">
      <el-card>
        <img src="mwzz.png" style="width: 100%;">
        <p>《宝可梦》：妙蛙种子</p>
        <!-- 因为div里面的子元素全部浮动，所以div已经失高
        为了让底部文字显得离卡片底部有一些距离，通过设置div的下外间距可以解决（一种方式）-->
<!--        <div style="margin-bottom: 40px;">-->
        <div style="height: 20px;">
          <span style="float:left;">属性：草、毒</span>
          <span style="float:right;">好友：小火龙</span>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>

</script>


<style scoped>

</style>